<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const chartRef = ref<HTMLElement>();
const piaData = ref([
    {
        value: 0,
        name: "短途出行",
        itemStyle: {
            color: "#ff9f43"
        }
    },
    {
        value: 0,
        name: "长途出行",
        itemStyle: {
            color: "#10ac84"
        }
    },
    {
        value: 0,
        name: "商务出行",
        itemStyle: {
            color: "#5f27cd"
        }
    },
    {
        value: 0,
        name: "民用出行",
        itemStyle: {
            color: "#ff6348"
        }
    }
])

const initChart = () => {
    const chart = echarts.init(chartRef.value!);

    const option = {
        tooltip: {
            trigger: "item",
            formatter: function (params) {
                return params.seriesName + '<br/>' + params.name + ': ' + Math.floor(params.percent) + '%';
            }
        },
        legend: {
            orient: "horizontal",
            left: "center",
            bottom: "5%",
            textStyle: {
                color: "#fff",
                fontSize: 12
            },
            itemWidth: 10,
            itemHeight: 10
        },
        series: [
            {
                name: "订单类型",
                type: "pie",
                radius: ["30%", "60%"],
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    formatter: function (params) {
                        return params.name + ': ' + Math.floor(params.percent) + '%';
                    },
                    color: "#fff",
                    fontSize: 12
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: "16",
                        fontWeight: "bold"
                    }
                },
                labelLine: {
                    show: true
                },
                data: piaData.value
            }
        ]
    };

    chart.setOption(option);

    // 响应式
    window.addEventListener("resize", () => {
        chart.resize();
    });
};

onMounted(() => {
    let timer = setTimeout(() => {
        initChart();
        clearTimeout(timer);
    }, 1000);
});


const init = (module: any) => {
    let obj = JSON.parse(module)
    if (module) {
        piaData.value.forEach((item: any) => {
            if(item.name == '短途出行'){
                item.value = Number(obj.shortDistanceTravel)
            }else if(item.name == '长途出行'){
                item.value = Number(obj.longDistanceTravel)    
            }else if(item.name == '商务出行'){
                item.value = Number(obj.businessTravel)
            }else if(item.name == '民用出行'){
                item.value = Number(obj.civilianTravel)
            }
        })
    }
}

defineExpose({
    init
})
</script>

<template>
    <div class="left-bottom-chart">
        <div ref="chartRef" class="chart-container"></div>
    </div>
</template>

<style scoped lang="less">
.left-bottom-chart {
    width: 100%;
    height: 100%;

    .chart-container {
        width: 100%;
        height: 100%;
    }
}
</style>